

	<page-title ng-if="layoutOptions.pageTitles" title="DataTable" description="Dynamic table variants with pagination and other controls"></page-title>



<!-- Basic Setup -->
<div class="panel panel-default">
	<div class="panel-heading">
		<h3 class="panel-title">Basic Setup</h3>
		
		<div class="panel-options">
			<a href="" data-toggle="panel">
				<span class="collapse-icon">&ndash;</span>
				<span class="expand-icon">+</span>
			</a>
			<a href="" data-toggle="remove">
				&times;
			</a>
		</div>
	</div>
	<div class="panel-body">
		
		<script type="text/javascript">
		jQuery(document).ready(function($)
		{
			$("#example-1").dataTable({
				aLengthMenu: [
					[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]
				]
			});
		});
		</script>
		
		<table id="example-1" class="table table-striped table-bordered" cellspacing="0" width="100%">
			<thead>
				<tr>
					<th>Name</th>
					<th>Position</th>
					<th>Office</th>
					<th>Age</th>
					<th>Start date</th>
					<th>Salary</th>
				</tr>
			</thead>
		
			<tfoot>
				<tr>
					<th>Name</th>
					<th>Position</th>
					<th>Office</th>
					<th>Age</th>
					<th>Start date</th>
					<th>Salary</th>
				</tr>
			</tfoot>
		
			<tbody>
				<tr>
					<td>Tiger Nixon</td>
					<td>System Architect</td>
					<td>Edinburgh</td>
					<td>61</td>
					<td>2011/04/25</td>
					<td>$320,800</td>
				</tr>
				<tr>
					<td>Garrett Winters</td>
					<td>Accountant</td>
					<td>Tokyo</td>
					<td>63</td>
					<td>2011/07/25</td>
					<td>$170,750</td>
				</tr>
				<tr>
					<td>Ashton Cox</td>
					<td>Junior Technical Author</td>
					<td>San Francisco</td>
					<td>66</td>
					<td>2009/01/12</td>
					<td>$86,000</td>
				</tr>
				<tr>
					<td>Cedric Kelly</td>
					<td>Senior Javascript Developer</td>
					<td>Edinburgh</td>
					<td>22</td>
					<td>2012/03/29</td>
					<td>$433,060</td>
				</tr>
				<tr>
					<td>Airi Satou</td>
					<td>Accountant</td>
					<td>Tokyo</td>
					<td>33</td>
					<td>2008/11/28</td>
					<td>$162,700</td>
				</tr>
				<tr>
					<td>Brielle Williamson</td>
					<td>Integration Specialist</td>
					<td>New York</td>
					<td>61</td>
					<td>2012/12/02</td>
					<td>$372,000</td>
				</tr>
				<tr>
					<td>Herrod Chandler</td>
					<td>Sales Assistant</td>
					<td>San Francisco</td>
					<td>59</td>
					<td>2012/08/06</td>
					<td>$137,500</td>
				</tr>
				<tr>
					<td>Rhona Davidson</td>
					<td>Integration Specialist</td>
					<td>Tokyo</td>
					<td>55</td>
					<td>2010/10/14</td>
					<td>$327,900</td>
				</tr>
				<tr>
					<td>Colleen Hurst</td>
					<td>Javascript Developer</td>
					<td>San Francisco</td>
					<td>39</td>
					<td>2009/09/15</td>
					<td>$205,500</td>
				</tr>
				<tr>
					<td>Sonya Frost</td>
					<td>Software Engineer</td>
					<td>Edinburgh</td>
					<td>23</td>
					<td>2008/12/13</td>
					<td>$103,600</td>
				</tr>
				<tr>
					<td>Jena Gaines</td>
					<td>Office Manager</td>
					<td>London</td>
					<td>30</td>
					<td>2008/12/19</td>
					<td>$90,560</td>
				</tr>
				<tr>
					<td>Quinn Flynn</td>
					<td>Support Lead</td>
					<td>Edinburgh</td>
					<td>22</td>
					<td>2013/03/03</td>
					<td>$342,000</td>
				</tr>
				<tr>
					<td>Charde Marshall</td>
					<td>Regional Director</td>
					<td>San Francisco</td>
					<td>36</td>
					<td>2008/10/16</td>
					<td>$470,600</td>
				</tr>
				<tr>
					<td>Haley Kennedy</td>
					<td>Senior Marketing Designer</td>
					<td>London</td>
					<td>43</td>
					<td>2012/12/18</td>
					<td>$313,500</td>
				</tr>
				<tr>
					<td>Tatyana Fitzpatrick</td>
					<td>Regional Director</td>
					<td>London</td>
					<td>19</td>
					<td>2010/03/17</td>
					<td>$385,750</td>
				</tr>
				<tr>
					<td>Michael Silva</td>
					<td>Marketing Designer</td>
					<td>London</td>
					<td>66</td>
					<td>2012/11/27</td>
					<td>$198,500</td>
				</tr>
				<tr>
					<td>Paul Byrd</td>
					<td>Chief Financial Officer (CFO)</td>
					<td>New York</td>
					<td>64</td>
					<td>2010/06/09</td>
					<td>$725,000</td>
				</tr>
				<tr>
					<td>Gloria Little</td>
					<td>Systems Administrator</td>
					<td>New York</td>
					<td>59</td>
					<td>2009/04/10</td>
					<td>$237,500</td>
				</tr>
				<tr>
					<td>Bradley Greer</td>
					<td>Software Engineer</td>
					<td>London</td>
					<td>41</td>
					<td>2012/10/13</td>
					<td>$132,000</td>
				</tr>
				<tr>
					<td>Dai Rios</td>
					<td>Personnel Lead</td>
					<td>Edinburgh</td>
					<td>35</td>
					<td>2012/09/26</td>
					<td>$217,500</td>
				</tr>
				<tr>
					<td>Jenette Caldwell</td>
					<td>Development Lead</td>
					<td>New York</td>
					<td>30</td>
					<td>2011/09/03</td>
					<td>$345,000</td>
				</tr>
				<tr>
					<td>Yuri Berry</td>
					<td>Chief Marketing Officer (CMO)</td>
					<td>New York</td>
					<td>40</td>
					<td>2009/06/25</td>
					<td>$675,000</td>
				</tr>
				<tr>
					<td>Caesar Vance</td>
					<td>Pre-Sales Support</td>
					<td>New York</td>
					<td>21</td>
					<td>2011/12/12</td>
					<td>$106,450</td>
				</tr>
				<tr>
					<td>Doris Wilder</td>
					<td>Sales Assistant</td>
					<td>Sidney</td>
					<td>23</td>
					<td>2010/09/20</td>
					<td>$85,600</td>
				</tr>
				<tr>
					<td>Angelica Ramos</td>
					<td>Chief Executive Officer (CEO)</td>
					<td>London</td>
					<td>47</td>
					<td>2009/10/09</td>
					<td>$1,200,000</td>
				</tr>
				<tr>
					<td>Gavin Joyce</td>
					<td>Developer</td>
					<td>Edinburgh</td>
					<td>42</td>
					<td>2010/12/22</td>
					<td>$92,575</td>
				</tr>
				<tr>
					<td>Jennifer Chang</td>
					<td>Regional Director</td>
					<td>Singapore</td>
					<td>28</td>
					<td>2010/11/14</td>
					<td>$357,650</td>
				</tr>
				<tr>
					<td>Brenden Wagner</td>
					<td>Software Engineer</td>
					<td>San Francisco</td>
					<td>28</td>
					<td>2011/06/07</td>
					<td>$206,850</td>
				</tr>
				<tr>
					<td>Fiona Green</td>
					<td>Chief Operating Officer (COO)</td>
					<td>San Francisco</td>
					<td>48</td>
					<td>2010/03/11</td>
					<td>$850,000</td>
				</tr>
				<tr>
					<td>Shou Itou</td>
					<td>Regional Marketing</td>
					<td>Tokyo</td>
					<td>20</td>
					<td>2011/08/14</td>
					<td>$163,000</td>
				</tr>
				<tr>
					<td>Michelle House</td>
					<td>Integration Specialist</td>
					<td>Sidney</td>
					<td>37</td>
					<td>2011/06/02</td>
					<td>$95,400</td>
				</tr>
				<tr>
					<td>Suki Burks</td>
					<td>Developer</td>
					<td>London</td>
					<td>53</td>
					<td>2009/10/22</td>
					<td>$114,500</td>
				</tr>
				<tr>
					<td>Prescott Bartlett</td>
					<td>Technical Author</td>
					<td>London</td>
					<td>27</td>
					<td>2011/05/07</td>
					<td>$145,000</td>
				</tr>
				<tr>
					<td>Gavin Cortez</td>
					<td>Team Leader</td>
					<td>San Francisco</td>
					<td>22</td>
					<td>2008/10/26</td>
					<td>$235,500</td>
				</tr>
				<tr>
					<td>Martena Mccray</td>
					<td>Post-Sales support</td>
					<td>Edinburgh</td>
					<td>46</td>
					<td>2011/03/09</td>
					<td>$324,050</td>
				</tr>
				<tr>
					<td>Unity Butler</td>
					<td>Marketing Designer</td>
					<td>San Francisco</td>
					<td>47</td>
					<td>2009/12/09</td>
					<td>$85,675</td>
				</tr>
				<tr>
					<td>Howard Hatfield</td>
					<td>Office Manager</td>
					<td>San Francisco</td>
					<td>51</td>
					<td>2008/12/16</td>
					<td>$164,500</td>
				</tr>
				<tr>
					<td>Hope Fuentes</td>
					<td>Secretary</td>
					<td>San Francisco</td>
					<td>41</td>
					<td>2010/02/12</td>
					<td>$109,850</td>
				</tr>
				<tr>
					<td>Vivian Harrell</td>
					<td>Financial Controller</td>
					<td>San Francisco</td>
					<td>62</td>
					<td>2009/02/14</td>
					<td>$452,500</td>
				</tr>
				<tr>
					<td>Timothy Mooney</td>
					<td>Office Manager</td>
					<td>London</td>
					<td>37</td>
					<td>2008/12/11</td>
					<td>$136,200</td>
				</tr>
				<tr>
					<td>Jackson Bradshaw</td>
					<td>Director</td>
					<td>New York</td>
					<td>65</td>
					<td>2008/09/26</td>
					<td>$645,750</td>
				</tr>
				<tr>
					<td>Olivia Liang</td>
					<td>Support Engineer</td>
					<td>Singapore</td>
					<td>64</td>
					<td>2011/02/03</td>
					<td>$234,500</td>
				</tr>
				<tr>
					<td>Bruno Nash</td>
					<td>Software Engineer</td>
					<td>London</td>
					<td>38</td>
					<td>2011/05/03</td>
					<td>$163,500</td>
				</tr>
				<tr>
					<td>Sakura Yamamoto</td>
					<td>Support Engineer</td>
					<td>Tokyo</td>
					<td>37</td>
					<td>2009/08/19</td>
					<td>$139,575</td>
				</tr>
				<tr>
					<td>Thor Walton</td>
					<td>Developer</td>
					<td>New York</td>
					<td>61</td>
					<td>2013/08/11</td>
					<td>$98,540</td>
				</tr>
				<tr>
					<td>Finn Camacho</td>
					<td>Support Engineer</td>
					<td>San Francisco</td>
					<td>47</td>
					<td>2009/07/07</td>
					<td>$87,500</td>
				</tr>
				<tr>
					<td>Serge Baldwin</td>
					<td>Data Coordinator</td>
					<td>Singapore</td>
					<td>64</td>
					<td>2012/04/09</td>
					<td>$138,575</td>
				</tr>
				<tr>
					<td>Zenaida Frank</td>
					<td>Software Engineer</td>
					<td>New York</td>
					<td>63</td>
					<td>2010/01/04</td>
					<td>$125,250</td>
				</tr>
				<tr>
					<td>Zorita Serrano</td>
					<td>Software Engineer</td>
					<td>San Francisco</td>
					<td>56</td>
					<td>2012/06/01</td>
					<td>$115,000</td>
				</tr>
				<tr>
					<td>Jennifer Acosta</td>
					<td>Junior Javascript Developer</td>
					<td>Edinburgh</td>
					<td>43</td>
					<td>2013/02/01</td>
					<td>$75,650</td>
				</tr>
				<tr>
					<td>Cara Stevens</td>
					<td>Sales Assistant</td>
					<td>New York</td>
					<td>46</td>
					<td>2011/12/06</td>
					<td>$145,600</td>
				</tr>
				<tr>
					<td>Hermione Butler</td>
					<td>Regional Director</td>
					<td>London</td>
					<td>47</td>
					<td>2011/03/21</td>
					<td>$356,250</td>
				</tr>
				<tr>
					<td>Lael Greer</td>
					<td>Systems Administrator</td>
					<td>London</td>
					<td>21</td>
					<td>2009/02/27</td>
					<td>$103,500</td>
				</tr>
				<tr>
					<td>Jonas Alexander</td>
					<td>Developer</td>
					<td>San Francisco</td>
					<td>30</td>
					<td>2010/07/14</td>
					<td>$86,500</td>
				</tr>
				<tr>
					<td>Shad Decker</td>
					<td>Regional Director</td>
					<td>Edinburgh</td>
					<td>51</td>
					<td>2008/11/13</td>
					<td>$183,000</td>
				</tr>
				<tr>
					<td>Michael Bruce</td>
					<td>Javascript Developer</td>
					<td>Singapore</td>
					<td>29</td>
					<td>2011/06/27</td>
					<td>$183,000</td>
				</tr>
				<tr>
					<td>Donna Snider</td>
					<td>Customer Support</td>
					<td>New York</td>
					<td>27</td>
					<td>2011/01/25</td>
					<td>$112,000</td>
				</tr>
			</tbody>
		</table>
		
	</div>
</div>


<!-- Removing search and results count filter -->
<div class="panel panel-default">
	<div class="panel-heading">
		<h3 class="panel-title">Removing search and results count filter</h3>
		
		<div class="panel-options">
			<a href="" data-toggle="panel">
				<span class="collapse-icon">&ndash;</span>
				<span class="expand-icon">+</span>
			</a>
			<a href="" data-toggle="remove">
				&times;
			</a>
		</div>
	</div>
	<div class="panel-body">
		
		<script type="text/javascript">
		jQuery(document).ready(function($)
		{
			$("#example-2").dataTable({
				dom: "t" + "<'row'<'col-xs-6'i><'col-xs-6'p>>",
				aoColumns: [
					{bSortable: false},
					null,
					null,
					null,
					null
				],
			});
			
			// Replace checkboxes when they appear
			var $state = $("#example-2 thead input[type='checkbox']");
			
			$("#example-2").on('draw.dt', function()
			{
				cbr_replace();
				
				$state.trigger('change');
			});
			
			// Script to select all checkboxes
			$state.on('change', function(ev)
			{
				var $chcks = $("#example-2 tbody input[type='checkbox']");
				
				if($state.is(':checked'))
				{
					$chcks.prop('checked', true).trigger('change');
				}
				else
				{
					$chcks.prop('checked', false).trigger('change');
				}
			});
		});
		</script>
		
		<table class="table table-bordered table-striped" id="example-2">
			<thead>
				<tr>
					<th class="no-sorting">
						<input type="checkbox" class="cbr">
					</th>
					<th>Student Name</th>
					<th>Average Grade</th>
					<th>Curriculum / Occupation</th>
					<th>Actions</th>
				</tr>
			</thead>
			
			<tbody class="middle-align">
			
				<tr>
					<td>
						<input type="checkbox" class="cbr">
					</td>
					<td>Randy S. Smith</td>
					<td>8.7</td>
					<td>Social and human service</td>
					<td>
						<a href="" class="btn btn-secondary btn-sm btn-icon icon-left">
							Edit
						</a>
						
						<a href="" class="btn btn-danger btn-sm btn-icon icon-left">
							Delete
						</a>
						
						<a href="" class="btn btn-info btn-sm btn-icon icon-left">
							Profile
						</a>
					</td>
				</tr>
				
				<tr>
					<td>
						<input type="checkbox" class="cbr">
					</td>
					<td>Ellen C. Jones</td>
					<td>7.2</td>
					<td>Education and development manager</td>
					<td>
						<a href="" class="btn btn-secondary btn-sm btn-icon icon-left">
							Edit
						</a>
						
						<a href="" class="btn btn-danger btn-sm btn-icon icon-left">
							Delete
						</a>
						
						<a href="" class="btn btn-info btn-sm btn-icon icon-left">
							Profile
						</a>
					</td>
				</tr>
				
				<tr>
					<td>
						<input type="checkbox" class="cbr">
					</td>
					<td>Carl D. Kaya</td>
					<td>9.5</td>
					<td>Express Merchant Service</td>
					<td>
						<a href="" class="btn btn-secondary btn-sm btn-icon icon-left">
							Edit
						</a>
						
						<a href="" class="btn btn-danger btn-sm btn-icon icon-left">
							Delete
						</a>
						
						<a href="" class="btn btn-info btn-sm btn-icon icon-left">
							Profile
						</a>
					</td>
				</tr>
				
				<tr>
					<td>
						<input type="checkbox" class="cbr">
					</td>
					<td>Jennifer J. Jefferson</td>
					<td>10</td>
					<td>Maxillofacial surgeon</td>
					<td>
						<a href="" class="btn btn-secondary btn-sm btn-icon icon-left">
							Edit
						</a>
						
						<a href="" class="btn btn-danger btn-sm btn-icon icon-left">
							Delete
						</a>
						
						<a href="" class="btn btn-info btn-sm btn-icon icon-left">
							Profile
						</a>
					</td>
				</tr>
				
				<tr>
					<td>
						<input type="checkbox" class="cbr">
					</td>
					<td>April L. Baker <span class="label label-success">New Applicant</span></td>
					<td>6.8</td>
					<td>Set and exhibit designer</td>
					<td>
						<a href="" class="btn btn-secondary btn-sm btn-icon icon-left">
							Edit
						</a>
						
						<a href="" class="btn btn-danger btn-sm btn-icon icon-left">
							Delete
						</a>
						
						<a href="" class="btn btn-info btn-sm btn-icon icon-left">
							Profile
						</a>
					</td>
				</tr>
				
				<tr>
					<td>
						<input type="checkbox" class="cbr">
					</td>
					<td>Lillian J. Earl</td>
					<td>7.6</td>
					<td>Social and human service assistant</td>
					<td>
						<a href="" class="btn btn-secondary btn-sm btn-icon icon-left">
							Edit
						</a>
						
						<a href="" class="btn btn-danger btn-sm btn-icon icon-left">
							Delete
						</a>
						
						<a href="" class="btn btn-info btn-sm btn-icon icon-left">
							Profile
						</a>
					</td>
				</tr>
				
				<tr>
					<td>
						<input type="checkbox" class="cbr">
					</td>
					<td>Ellen C. Jones</td>
					<td>7.2</td>
					<td>Education and development manager</td>
					<td>
						<a href="" class="btn btn-secondary btn-sm btn-icon icon-left">
							Edit
						</a>
						
						<a href="" class="btn btn-danger btn-sm btn-icon icon-left">
							Delete
						</a>
						
						<a href="" class="btn btn-info btn-sm btn-icon icon-left">
							Profile
						</a>
					</td>
				</tr>
				
				<tr>
					<td>
						<input type="checkbox" class="cbr">
					</td>
					<td>Randy S. Smith</td>
					<td>8.7</td>
					<td>Social and human service</td>
					<td>
						<a href="" class="btn btn-secondary btn-sm btn-icon icon-left">
							Edit
						</a>
						
						<a href="" class="btn btn-danger btn-sm btn-icon icon-left">
							Delete
						</a>
						
						<a href="" class="btn btn-info btn-sm btn-icon icon-left">
							Profile
						</a>
					</td>
				</tr>
				
				<tr>
					<td>
						<input type="checkbox" class="cbr">
					</td>
					<td>Jennifer J. Jefferson</td>
					<td>10</td>
					<td>Maxillofacial surgeon</td>
					<td>
						<a href="" class="btn btn-secondary btn-sm btn-icon icon-left">
							Edit
						</a>
						
						<a href="" class="btn btn-danger btn-sm btn-icon icon-left">
							Delete
						</a>
						
						<a href="" class="btn btn-info btn-sm btn-icon icon-left">
							Profile
						</a>
					</td>
				</tr>
				
				<tr>
					<td>
						<input type="checkbox" class="cbr">
					</td>
					<td>Carl D. Kaya</td>
					<td>9.5</td>
					<td>Express Merchant Service</td>
					<td>
						<a href="" class="btn btn-secondary btn-sm btn-icon icon-left">
							Edit
						</a>
						
						<a href="" class="btn btn-danger btn-sm btn-icon icon-left">
							Delete
						</a>
						
						<a href="" class="btn btn-info btn-sm btn-icon icon-left">
							Profile
						</a>
					</td>
				</tr>
				
				<tr>
					<td>
						<input type="checkbox" class="cbr">
					</td>
					<td>Lillian J. Earl</td>
					<td>7.6</td>
					<td>Social and human service assistant</td>
					<td>
						<a href="" class="btn btn-secondary btn-sm btn-icon icon-left">
							Edit
						</a>
						
						<a href="" class="btn btn-danger btn-sm btn-icon icon-left">
							Delete
						</a>
						
						<a href="" class="btn btn-info btn-sm btn-icon icon-left">
							Profile
						</a>
					</td>
				</tr>
				
				<tr>
					<td>
						<input type="checkbox" class="cbr">
					</td>
					<td>April L. Baker <span class="label label-success">New Applicant</span></td>
					<td>6.8</td>
					<td>Set and exhibit designer</td>
					<td>
						<a href="" class="btn btn-secondary btn-sm btn-icon icon-left">
							Edit
						</a>
						
						<a href="" class="btn btn-danger btn-sm btn-icon icon-left">
							Delete
						</a>
						
						<a href="" class="btn btn-info btn-sm btn-icon icon-left">
							Profile
						</a>
					</td>
				</tr>
			
				<tr>
					<td>
						<input type="checkbox" class="cbr">
					</td>
					<td>Randy S. Smith</td>
					<td>8.7</td>
					<td>Social and human service</td>
					<td>
						<a href="" class="btn btn-secondary btn-sm btn-icon icon-left">
							Edit
						</a>
						
						<a href="" class="btn btn-danger btn-sm btn-icon icon-left">
							Delete
						</a>
						
						<a href="" class="btn btn-info btn-sm btn-icon icon-left">
							Profile
						</a>
					</td>
				</tr>
				
				<tr>
					<td>
						<input type="checkbox" class="cbr">
					</td>
					<td>Ellen C. Jones</td>
					<td>7.2</td>
					<td>Education and development manager</td>
					<td>
						<a href="" class="btn btn-secondary btn-sm btn-icon icon-left">
							Edit
						</a>
						
						<a href="" class="btn btn-danger btn-sm btn-icon icon-left">
							Delete
						</a>
						
						<a href="" class="btn btn-info btn-sm btn-icon icon-left">
							Profile
						</a>
					</td>
				</tr>
				
				<tr>
					<td>
						<input type="checkbox" class="cbr">
					</td>
					<td>Carl D. Kaya</td>
					<td>9.5</td>
					<td>Express Merchant Service</td>
					<td>
						<a href="" class="btn btn-secondary btn-sm btn-icon icon-left">
							Edit
						</a>
						
						<a href="" class="btn btn-danger btn-sm btn-icon icon-left">
							Delete
						</a>
						
						<a href="" class="btn btn-info btn-sm btn-icon icon-left">
							Profile
						</a>
					</td>
				</tr>
				
				<tr>
					<td>
						<input type="checkbox" class="cbr">
					</td>
					<td>Jennifer J. Jefferson</td>
					<td>10</td>
					<td>Maxillofacial surgeon</td>
					<td>
						<a href="" class="btn btn-secondary btn-sm btn-icon icon-left">
							Edit
						</a>
						
						<a href="" class="btn btn-danger btn-sm btn-icon icon-left">
							Delete
						</a>
						
						<a href="" class="btn btn-info btn-sm btn-icon icon-left">
							Profile
						</a>
					</td>
				</tr>
				
				<tr>
					<td>
						<input type="checkbox" class="cbr">
					</td>
					<td>April L. Baker <span class="label label-success">New Applicant</span></td>
					<td>6.8</td>
					<td>Set and exhibit designer</td>
					<td>
						<a href="" class="btn btn-secondary btn-sm btn-icon icon-left">
							Edit
						</a>
						
						<a href="" class="btn btn-danger btn-sm btn-icon icon-left">
							Delete
						</a>
						
						<a href="" class="btn btn-info btn-sm btn-icon icon-left">
							Profile
						</a>
					</td>
				</tr>
				
				<tr>
					<td>
						<input type="checkbox" class="cbr">
					</td>
					<td>Lillian J. Earl</td>
					<td>7.6</td>
					<td>Social and human service assistant</td>
					<td>
						<a href="" class="btn btn-secondary btn-sm btn-icon icon-left">
							Edit
						</a>
						
						<a href="" class="btn btn-danger btn-sm btn-icon icon-left">
							Delete
						</a>
						
						<a href="" class="btn btn-info btn-sm btn-icon icon-left">
							Profile
						</a>
					</td>
				</tr>
				
				<tr>
					<td>
						<input type="checkbox" class="cbr">
					</td>
					<td>Ellen C. Jones</td>
					<td>7.2</td>
					<td>Education and development manager</td>
					<td>
						<a href="" class="btn btn-secondary btn-sm btn-icon icon-left">
							Edit
						</a>
						
						<a href="" class="btn btn-danger btn-sm btn-icon icon-left">
							Delete
						</a>
						
						<a href="" class="btn btn-info btn-sm btn-icon icon-left">
							Profile
						</a>
					</td>
				</tr>
				
				<tr>
					<td>
						<input type="checkbox" class="cbr">
					</td>
					<td>Randy S. Smith</td>
					<td>8.7</td>
					<td>Social and human service</td>
					<td>
						<a href="" class="btn btn-secondary btn-sm btn-icon icon-left">
							Edit
						</a>
						
						<a href="" class="btn btn-danger btn-sm btn-icon icon-left">
							Delete
						</a>
						
						<a href="" class="btn btn-info btn-sm btn-icon icon-left">
							Profile
						</a>
					</td>
				</tr>
				
				<tr>
					<td>
						<input type="checkbox" class="cbr">
					</td>
					<td>Jennifer J. Jefferson</td>
					<td>10</td>
					<td>Maxillofacial surgeon</td>
					<td>
						<a href="" class="btn btn-secondary btn-sm btn-icon icon-left">
							Edit
						</a>
						
						<a href="" class="btn btn-danger btn-sm btn-icon icon-left">
							Delete
						</a>
						
						<a href="" class="btn btn-info btn-sm btn-icon icon-left">
							Profile
						</a>
					</td>
				</tr>
				
				<tr>
					<td>
						<input type="checkbox" class="cbr">
					</td>
					<td>Carl D. Kaya</td>
					<td>9.5</td>
					<td>Express Merchant Service</td>
					<td>
						<a href="" class="btn btn-secondary btn-sm btn-icon icon-left">
							Edit
						</a>
						
						<a href="" class="btn btn-danger btn-sm btn-icon icon-left">
							Delete
						</a>
						
						<a href="" class="btn btn-info btn-sm btn-icon icon-left">
							Profile
						</a>
					</td>
				</tr>
				
				<tr>
					<td>
						<input type="checkbox" class="cbr">
					</td>
					<td>Lillian J. Earl</td>
					<td>7.6</td>
					<td>Social and human service assistant</td>
					<td>
						<a href="" class="btn btn-secondary btn-sm btn-icon icon-left">
							Edit
						</a>
						
						<a href="" class="btn btn-danger btn-sm btn-icon icon-left">
							Delete
						</a>
						
						<a href="" class="btn btn-info btn-sm btn-icon icon-left">
							Profile
						</a>
					</td>
				</tr>
				
				<tr>
					<td>
						<input type="checkbox" class="cbr">
					</td>
					<td>April L. Baker <span class="label label-success">New Applicant</span></td>
					<td>6.8</td>
					<td>Set and exhibit designer</td>
					<td>
						<a href="" class="btn btn-secondary btn-sm btn-icon icon-left">
							Edit
						</a>
						
						<a href="" class="btn btn-danger btn-sm btn-icon icon-left">
							Delete
						</a>
						
						<a href="" class="btn btn-info btn-sm btn-icon icon-left">
							Profile
						</a>
					</td>
				</tr>
			
				<tr>
					<td>
						<input type="checkbox" class="cbr">
					</td>
					<td>Randy S. Smith</td>
					<td>8.7</td>
					<td>Social and human service</td>
					<td>
						<a href="" class="btn btn-secondary btn-sm btn-icon icon-left">
							Edit
						</a>
						
						<a href="" class="btn btn-danger btn-sm btn-icon icon-left">
							Delete
						</a>
						
						<a href="" class="btn btn-info btn-sm btn-icon icon-left">
							Profile
						</a>
					</td>
				</tr>
				
				<tr>
					<td>
						<input type="checkbox" class="cbr">
					</td>
					<td>Ellen C. Jones</td>
					<td>7.2</td>
					<td>Education and development manager</td>
					<td>
						<a href="" class="btn btn-secondary btn-sm btn-icon icon-left">
							Edit
						</a>
						
						<a href="" class="btn btn-danger btn-sm btn-icon icon-left">
							Delete
						</a>
						
						<a href="" class="btn btn-info btn-sm btn-icon icon-left">
							Profile
						</a>
					</td>
				</tr>
				
				<tr>
					<td>
						<input type="checkbox" class="cbr">
					</td>
					<td>Carl D. Kaya</td>
					<td>9.5</td>
					<td>Express Merchant Service</td>
					<td>
						<a href="" class="btn btn-secondary btn-sm btn-icon icon-left">
							Edit
						</a>
						
						<a href="" class="btn btn-danger btn-sm btn-icon icon-left">
							Delete
						</a>
						
						<a href="" class="btn btn-info btn-sm btn-icon icon-left">
							Profile
						</a>
					</td>
				</tr>
				
				<tr>
					<td>
						<input type="checkbox" class="cbr">
					</td>
					<td>Jennifer J. Jefferson</td>
					<td>10</td>
					<td>Maxillofacial surgeon</td>
					<td>
						<a href="" class="btn btn-secondary btn-sm btn-icon icon-left">
							Edit
						</a>
						
						<a href="" class="btn btn-danger btn-sm btn-icon icon-left">
							Delete
						</a>
						
						<a href="" class="btn btn-info btn-sm btn-icon icon-left">
							Profile
						</a>
					</td>
				</tr>
				
				<tr>
					<td>
						<input type="checkbox" class="cbr">
					</td>
					<td>April L. Baker <span class="label label-success">New Applicant</span></td>
					<td>6.8</td>
					<td>Set and exhibit designer</td>
					<td>
						<a href="" class="btn btn-secondary btn-sm btn-icon icon-left">
							Edit
						</a>
						
						<a href="" class="btn btn-danger btn-sm btn-icon icon-left">
							Delete
						</a>
						
						<a href="" class="btn btn-info btn-sm btn-icon icon-left">
							Profile
						</a>
					</td>
				</tr>
				
				<tr>
					<td>
						<input type="checkbox" class="cbr">
					</td>
					<td>Lillian J. Earl</td>
					<td>7.6</td>
					<td>Social and human service assistant</td>
					<td>
						<a href="" class="btn btn-secondary btn-sm btn-icon icon-left">
							Edit
						</a>
						
						<a href="" class="btn btn-danger btn-sm btn-icon icon-left">
							Delete
						</a>
						
						<a href="" class="btn btn-info btn-sm btn-icon icon-left">
							Profile
						</a>
					</td>
				</tr>
				
				<tr>
					<td>
						<input type="checkbox" class="cbr">
					</td>
					<td>Ellen C. Jones</td>
					<td>7.2</td>
					<td>Education and development manager</td>
					<td>
						<a href="" class="btn btn-secondary btn-sm btn-icon icon-left">
							Edit
						</a>
						
						<a href="" class="btn btn-danger btn-sm btn-icon icon-left">
							Delete
						</a>
						
						<a href="" class="btn btn-info btn-sm btn-icon icon-left">
							Profile
						</a>
					</td>
				</tr>
				
				<tr>
					<td>
						<input type="checkbox" class="cbr">
					</td>
					<td>Randy S. Smith</td>
					<td>8.7</td>
					<td>Social and human service</td>
					<td>
						<a href="" class="btn btn-secondary btn-sm btn-icon icon-left">
							Edit
						</a>
						
						<a href="" class="btn btn-danger btn-sm btn-icon icon-left">
							Delete
						</a>
						
						<a href="" class="btn btn-info btn-sm btn-icon icon-left">
							Profile
						</a>
					</td>
				</tr>
				
				<tr>
					<td>
						<input type="checkbox" class="cbr">
					</td>
					<td>Jennifer J. Jefferson</td>
					<td>10</td>
					<td>Maxillofacial surgeon</td>
					<td>
						<a href="" class="btn btn-secondary btn-sm btn-icon icon-left">
							Edit
						</a>
						
						<a href="" class="btn btn-danger btn-sm btn-icon icon-left">
							Delete
						</a>
						
						<a href="" class="btn btn-info btn-sm btn-icon icon-left">
							Profile
						</a>
					</td>
				</tr>
				
				<tr>
					<td>
						<input type="checkbox" class="cbr">
					</td>
					<td>Carl D. Kaya</td>
					<td>9.5</td>
					<td>Express Merchant Service</td>
					<td>
						<a href="" class="btn btn-secondary btn-sm btn-icon icon-left">
							Edit
						</a>
						
						<a href="" class="btn btn-danger btn-sm btn-icon icon-left">
							Delete
						</a>
						
						<a href="" class="btn btn-info btn-sm btn-icon icon-left">
							Profile
						</a>
					</td>
				</tr>
				
				<tr>
					<td>
						<input type="checkbox" class="cbr">
					</td>
					<td>Lillian J. Earl</td>
					<td>7.6</td>
					<td>Social and human service assistant</td>
					<td>
						<a href="" class="btn btn-secondary btn-sm btn-icon icon-left">
							Edit
						</a>
						
						<a href="" class="btn btn-danger btn-sm btn-icon icon-left">
							Delete
						</a>
						
						<a href="" class="btn btn-info btn-sm btn-icon icon-left">
							Profile
						</a>
					</td>
				</tr>
				
				<tr>
					<td>
						<input type="checkbox" class="cbr">
					</td>
					<td>April L. Baker <span class="label label-success">New Applicant</span></td>
					<td>6.8</td>
					<td>Set and exhibit designer</td>
					<td>
						<a href="" class="btn btn-secondary btn-sm btn-icon icon-left">
							Edit
						</a>
						
						<a href="" class="btn btn-danger btn-sm btn-icon icon-left">
							Delete
						</a>
						
						<a href="" class="btn btn-info btn-sm btn-icon icon-left">
							Profile
						</a>
					</td>
				</tr>
			
				<tr>
					<td>
						<input type="checkbox" class="cbr">
					</td>
					<td>Randy S. Smith</td>
					<td>8.7</td>
					<td>Social and human service</td>
					<td>
						<a href="" class="btn btn-secondary btn-sm btn-icon icon-left">
							Edit
						</a>
						
						<a href="" class="btn btn-danger btn-sm btn-icon icon-left">
							Delete
						</a>
						
						<a href="" class="btn btn-info btn-sm btn-icon icon-left">
							Profile
						</a>
					</td>
				</tr>
				
				<tr>
					<td>
						<input type="checkbox" class="cbr">
					</td>
					<td>Ellen C. Jones</td>
					<td>7.2</td>
					<td>Education and development manager</td>
					<td>
						<a href="" class="btn btn-secondary btn-sm btn-icon icon-left">
							Edit
						</a>
						
						<a href="" class="btn btn-danger btn-sm btn-icon icon-left">
							Delete
						</a>
						
						<a href="" class="btn btn-info btn-sm btn-icon icon-left">
							Profile
						</a>
					</td>
				</tr>
				
				<tr>
					<td>
						<input type="checkbox" class="cbr">
					</td>
					<td>Carl D. Kaya</td>
					<td>9.5</td>
					<td>Express Merchant Service</td>
					<td>
						<a href="" class="btn btn-secondary btn-sm btn-icon icon-left">
							Edit
						</a>
						
						<a href="" class="btn btn-danger btn-sm btn-icon icon-left">
							Delete
						</a>
						
						<a href="" class="btn btn-info btn-sm btn-icon icon-left">
							Profile
						</a>
					</td>
				</tr>
				
				<tr>
					<td>
						<input type="checkbox" class="cbr">
					</td>
					<td>Jennifer J. Jefferson</td>
					<td>10</td>
					<td>Maxillofacial surgeon</td>
					<td>
						<a href="" class="btn btn-secondary btn-sm btn-icon icon-left">
							Edit
						</a>
						
						<a href="" class="btn btn-danger btn-sm btn-icon icon-left">
							Delete
						</a>
						
						<a href="" class="btn btn-info btn-sm btn-icon icon-left">
							Profile
						</a>
					</td>
				</tr>
				
				<tr>
					<td>
						<input type="checkbox" class="cbr">
					</td>
					<td>April L. Baker <span class="label label-success">New Applicant</span></td>
					<td>6.8</td>
					<td>Set and exhibit designer</td>
					<td>
						<a href="" class="btn btn-secondary btn-sm btn-icon icon-left">
							Edit
						</a>
						
						<a href="" class="btn btn-danger btn-sm btn-icon icon-left">
							Delete
						</a>
						
						<a href="" class="btn btn-info btn-sm btn-icon icon-left">
							Profile
						</a>
					</td>
				</tr>
				
				<tr>
					<td>
						<input type="checkbox" class="cbr">
					</td>
					<td>Lillian J. Earl</td>
					<td>7.6</td>
					<td>Social and human service assistant</td>
					<td>
						<a href="" class="btn btn-secondary btn-sm btn-icon icon-left">
							Edit
						</a>
						
						<a href="" class="btn btn-danger btn-sm btn-icon icon-left">
							Delete
						</a>
						
						<a href="" class="btn btn-info btn-sm btn-icon icon-left">
							Profile
						</a>
					</td>
				</tr>
				
				<tr>
					<td>
						<input type="checkbox" class="cbr">
					</td>
					<td>Ellen C. Jones</td>
					<td>7.2</td>
					<td>Education and development manager</td>
					<td>
						<a href="" class="btn btn-secondary btn-sm btn-icon icon-left">
							Edit
						</a>
						
						<a href="" class="btn btn-danger btn-sm btn-icon icon-left">
							Delete
						</a>
						
						<a href="" class="btn btn-info btn-sm btn-icon icon-left">
							Profile
						</a>
					</td>
				</tr>
				
				<tr>
					<td>
						<input type="checkbox" class="cbr">
					</td>
					<td>Randy S. Smith</td>
					<td>8.7</td>
					<td>Social and human service</td>
					<td>
						<a href="" class="btn btn-secondary btn-sm btn-icon icon-left">
							Edit
						</a>
						
						<a href="" class="btn btn-danger btn-sm btn-icon icon-left">
							Delete
						</a>
						
						<a href="" class="btn btn-info btn-sm btn-icon icon-left">
							Profile
						</a>
					</td>
				</tr>
				
				<tr>
					<td>
						<input type="checkbox" class="cbr">
					</td>
					<td>Jennifer J. Jefferson</td>
					<td>10</td>
					<td>Maxillofacial surgeon</td>
					<td>
						<a href="" class="btn btn-secondary btn-sm btn-icon icon-left">
							Edit
						</a>
						
						<a href="" class="btn btn-danger btn-sm btn-icon icon-left">
							Delete
						</a>
						
						<a href="" class="btn btn-info btn-sm btn-icon icon-left">
							Profile
						</a>
					</td>
				</tr>
				
				<tr>
					<td>
						<input type="checkbox" class="cbr">
					</td>
					<td>Carl D. Kaya</td>
					<td>9.5</td>
					<td>Express Merchant Service</td>
					<td>
						<a href="" class="btn btn-secondary btn-sm btn-icon icon-left">
							Edit
						</a>
						
						<a href="" class="btn btn-danger btn-sm btn-icon icon-left">
							Delete
						</a>
						
						<a href="" class="btn btn-info btn-sm btn-icon icon-left">
							Profile
						</a>
					</td>
				</tr>
				
				<tr>
					<td>
						<input type="checkbox" class="cbr">
					</td>
					<td>Lillian J. Earl</td>
					<td>7.6</td>
					<td>Social and human service assistant</td>
					<td>
						<a href="" class="btn btn-secondary btn-sm btn-icon icon-left">
							Edit
						</a>
						
						<a href="" class="btn btn-danger btn-sm btn-icon icon-left">
							Delete
						</a>
						
						<a href="" class="btn btn-info btn-sm btn-icon icon-left">
							Profile
						</a>
					</td>
				</tr>
				
				<tr>
					<td>
						<input type="checkbox" class="cbr">
					</td>
					<td>April L. Baker <span class="label label-success">New Applicant</span></td>
					<td>6.8</td>
					<td>Set and exhibit designer</td>
					<td>
						<a href="" class="btn btn-secondary btn-sm btn-icon icon-left">
							Edit
						</a>
						
						<a href="" class="btn btn-danger btn-sm btn-icon icon-left">
							Delete
						</a>
						
						<a href="" class="btn btn-info btn-sm btn-icon icon-left">
							Profile
						</a>
					</td>
				</tr>
			
				<tr>
					<td>
						<input type="checkbox" class="cbr">
					</td>
					<td>Randy S. Smith</td>
					<td>8.7</td>
					<td>Social and human service</td>
					<td>
						<a href="" class="btn btn-secondary btn-sm btn-icon icon-left">
							Edit
						</a>
						
						<a href="" class="btn btn-danger btn-sm btn-icon icon-left">
							Delete
						</a>
						
						<a href="" class="btn btn-info btn-sm btn-icon icon-left">
							Profile
						</a>
					</td>
				</tr>
				
				<tr>
					<td>
						<input type="checkbox" class="cbr">
					</td>
					<td>Ellen C. Jones</td>
					<td>7.2</td>
					<td>Education and development manager</td>
					<td>
						<a href="" class="btn btn-secondary btn-sm btn-icon icon-left">
							Edit
						</a>
						
						<a href="" class="btn btn-danger btn-sm btn-icon icon-left">
							Delete
						</a>
						
						<a href="" class="btn btn-info btn-sm btn-icon icon-left">
							Profile
						</a>
					</td>
				</tr>
				
				<tr>
					<td>
						<input type="checkbox" class="cbr">
					</td>
					<td>Carl D. Kaya</td>
					<td>9.5</td>
					<td>Express Merchant Service</td>
					<td>
						<a href="" class="btn btn-secondary btn-sm btn-icon icon-left">
							Edit
						</a>
						
						<a href="" class="btn btn-danger btn-sm btn-icon icon-left">
							Delete
						</a>
						
						<a href="" class="btn btn-info btn-sm btn-icon icon-left">
							Profile
						</a>
					</td>
				</tr>
				
				<tr>
					<td>
						<input type="checkbox" class="cbr">
					</td>
					<td>Jennifer J. Jefferson</td>
					<td>10</td>
					<td>Maxillofacial surgeon</td>
					<td>
						<a href="" class="btn btn-secondary btn-sm btn-icon icon-left">
							Edit
						</a>
						
						<a href="" class="btn btn-danger btn-sm btn-icon icon-left">
							Delete
						</a>
						
						<a href="" class="btn btn-info btn-sm btn-icon icon-left">
							Profile
						</a>
					</td>
				</tr>
				
				<tr>
					<td>
						<input type="checkbox" class="cbr">
					</td>
					<td>April L. Baker <span class="label label-success">New Applicant</span></td>
					<td>6.8</td>
					<td>Set and exhibit designer</td>
					<td>
						<a href="" class="btn btn-secondary btn-sm btn-icon icon-left">
							Edit
						</a>
						
						<a href="" class="btn btn-danger btn-sm btn-icon icon-left">
							Delete
						</a>
						
						<a href="" class="btn btn-info btn-sm btn-icon icon-left">
							Profile
						</a>
					</td>
				</tr>
				
				<tr>
					<td>
						<input type="checkbox" class="cbr">
					</td>
					<td>Lillian J. Earl</td>
					<td>7.6</td>
					<td>Social and human service assistant</td>
					<td>
						<a href="" class="btn btn-secondary btn-sm btn-icon icon-left">
							Edit
						</a>
						
						<a href="" class="btn btn-danger btn-sm btn-icon icon-left">
							Delete
						</a>
						
						<a href="" class="btn btn-info btn-sm btn-icon icon-left">
							Profile
						</a>
					</td>
				</tr>
				
				<tr>
					<td>
						<input type="checkbox" class="cbr">
					</td>
					<td>Ellen C. Jones</td>
					<td>7.2</td>
					<td>Education and development manager</td>
					<td>
						<a href="" class="btn btn-secondary btn-sm btn-icon icon-left">
							Edit
						</a>
						
						<a href="" class="btn btn-danger btn-sm btn-icon icon-left">
							Delete
						</a>
						
						<a href="" class="btn btn-info btn-sm btn-icon icon-left">
							Profile
						</a>
					</td>
				</tr>
				
				<tr>
					<td>
						<input type="checkbox" class="cbr">
					</td>
					<td>Randy S. Smith</td>
					<td>8.7</td>
					<td>Social and human service</td>
					<td>
						<a href="" class="btn btn-secondary btn-sm btn-icon icon-left">
							Edit
						</a>
						
						<a href="" class="btn btn-danger btn-sm btn-icon icon-left">
							Delete
						</a>
						
						<a href="" class="btn btn-info btn-sm btn-icon icon-left">
							Profile
						</a>
					</td>
				</tr>
				
				<tr>
					<td>
						<input type="checkbox" class="cbr">
					</td>
					<td>Jennifer J. Jefferson</td>
					<td>10</td>
					<td>Maxillofacial surgeon</td>
					<td>
						<a href="" class="btn btn-secondary btn-sm btn-icon icon-left">
							Edit
						</a>
						
						<a href="" class="btn btn-danger btn-sm btn-icon icon-left">
							Delete
						</a>
						
						<a href="" class="btn btn-info btn-sm btn-icon icon-left">
							Profile
						</a>
					</td>
				</tr>
				
				<tr>
					<td>
						<input type="checkbox" class="cbr">
					</td>
					<td>Carl D. Kaya</td>
					<td>9.5</td>
					<td>Express Merchant Service</td>
					<td>
						<a href="" class="btn btn-secondary btn-sm btn-icon icon-left">
							Edit
						</a>
						
						<a href="" class="btn btn-danger btn-sm btn-icon icon-left">
							Delete
						</a>
						
						<a href="" class="btn btn-info btn-sm btn-icon icon-left">
							Profile
						</a>
					</td>
				</tr>
				
				<tr>
					<td>
						<input type="checkbox" class="cbr">
					</td>
					<td>Lillian J. Earl</td>
					<td>7.6</td>
					<td>Social and human service assistant</td>
					<td>
						<a href="" class="btn btn-secondary btn-sm btn-icon icon-left">
							Edit
						</a>
						
						<a href="" class="btn btn-danger btn-sm btn-icon icon-left">
							Delete
						</a>
						
						<a href="" class="btn btn-info btn-sm btn-icon icon-left">
							Profile
						</a>
					</td>
				</tr>
				
				<tr>
					<td>
						<input type="checkbox" class="cbr">
					</td>
					<td>April L. Baker <span class="label label-success">New Applicant</span></td>
					<td>6.8</td>
					<td>Set and exhibit designer</td>
					<td>
						<a href="" class="btn btn-secondary btn-sm btn-icon icon-left">
							Edit
						</a>
						
						<a href="" class="btn btn-danger btn-sm btn-icon icon-left">
							Delete
						</a>
						
						<a href="" class="btn btn-info btn-sm btn-icon icon-left">
							Profile
						</a>
					</td>
				</tr>
				
			</tbody>
		</table>
		
	</div>
</div>


<!-- Custom column filtering -->
<div class="panel panel-default">
	<div class="panel-heading">
		<h3 class="panel-title">Custom column filtering</h3>
		
		<div class="panel-options">
			<a href="" data-toggle="panel">
				<span class="collapse-icon">&ndash;</span>
				<span class="expand-icon">+</span>
			</a>
			<a href="" data-toggle="remove">
				&times;
			</a>
		</div>
	</div>
	<div class="panel-body">
		
		<script type="text/javascript">
		jQuery(document).ready(function($)
		{
			$("#example-3").dataTable().yadcf([
				{column_number : 0},
				{column_number : 1, filter_type: 'text'},
				{column_number : 2, filter_type: 'text'},
				{column_number : 3, filter_type: 'range_number'},
				{column_number : 4},
			]);
		});
		</script>
		
		<table class="table table-striped table-bordered" id="example-3">
			<thead>
				<tr class="replace-inputs">
					<th>Rendering engine</th>
					<th>Browser</th>
					<th>Platform(s)</th>
					<th>Engine version</th>
					<th>CSS grade</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>Trident</td>
					<td>Internet Explorer 4.0</td>
					<td>Win 95+</td>
					<td class="center">4</td>
					<td class="center">X</td>
				</tr>
				<tr>
					<td>Trident</td>
					<td>Internet Explorer 5.0</td>
					<td>Win 95+</td>
					<td class="center">5</td>
					<td class="center">C</td>
				</tr>
				<tr>
					<td>Trident</td>
					<td>Internet Explorer 5.5</td>
					<td>Win 95+</td>
					<td class="center">5.5</td>
					<td class="center">A</td>
				</tr>
				<tr>
					<td>Trident</td>
					<td>Internet Explorer 6</td>
					<td>Win 98+</td>
					<td class="center">6</td>
					<td class="center">A</td>
				</tr>
				<tr>
					<td>Trident</td>
					<td>Internet Explorer 7</td>
					<td>Win XP SP2+</td>
					<td class="center">7</td>
					<td class="center">A</td>
				</tr>
				<tr>
					<td>Trident</td>
					<td>AOL browser (AOL desktop)</td>
					<td>Win XP</td>
					<td class="center">6</td>
					<td class="center">A</td>
				</tr>
				<tr>
					<td>Gecko</td>
					<td>Firefox 1.0</td>
					<td>Win 98+ / OSX.2+</td>
					<td class="center">1.7</td>
					<td class="center">A</td>
				</tr>
				<tr>
					<td>Gecko</td>
					<td>Firefox 1.5</td>
					<td>Win 98+ / OSX.2+</td>
					<td class="center">1.8</td>
					<td class="center">A</td>
				</tr>
				<tr>
					<td>Gecko</td>
					<td>Firefox 2.0</td>
					<td>Win 98+ / OSX.2+</td>
					<td class="center">1.8</td>
					<td class="center">A</td>
				</tr>
				<tr>
					<td>Gecko</td>
					<td>Firefox 3.0</td>
					<td>Win 2k+ / OSX.3+</td>
					<td class="center">1.9</td>
					<td class="center">A</td>
				</tr>
				<tr>
					<td>Gecko</td>
					<td>Camino 1.0</td>
					<td>OSX.2+</td>
					<td class="center">1.8</td>
					<td class="center">A</td>
				</tr>
				<tr>
					<td>Gecko</td>
					<td>Camino 1.5</td>
					<td>OSX.3+</td>
					<td class="center">1.8</td>
					<td class="center">A</td>
				</tr>
				<tr>
					<td>Gecko</td>
					<td>Netscape 7.2</td>
					<td>Win 95+ / Mac OS 8.6-9.2</td>
					<td class="center">1.7</td>
					<td class="center">A</td>
				</tr>
				<tr>
					<td>Gecko</td>
					<td>Netscape Browser 8</td>
					<td>Win 98SE+</td>
					<td class="center">1.7</td>
					<td class="center">A</td>
				</tr>
				<tr>
					<td>Gecko</td>
					<td>Netscape Navigator 9</td>
					<td>Win 98+ / OSX.2+</td>
					<td class="center">1.8</td>
					<td class="center">A</td>
				</tr>
				<tr>
					<td>Gecko</td>
					<td>Mozilla 1.0</td>
					<td>Win 95+ / OSX.1+</td>
					<td class="center">1</td>
					<td class="center">A</td>
				</tr>
				<tr>
					<td>Gecko</td>
					<td>Mozilla 1.1</td>
					<td>Win 95+ / OSX.1+</td>
					<td class="center">1.1</td>
					<td class="center">A</td>
				</tr>
				<tr>
					<td>Gecko</td>
					<td>Mozilla 1.2</td>
					<td>Win 95+ / OSX.1+</td>
					<td class="center">1.2</td>
					<td class="center">A</td>
				</tr>
				<tr>
					<td>Gecko</td>
					<td>Mozilla 1.3</td>
					<td>Win 95+ / OSX.1+</td>
					<td class="center">1.3</td>
					<td class="center">A</td>
				</tr>
				<tr>
					<td>Gecko</td>
					<td>Mozilla 1.4</td>
					<td>Win 95+ / OSX.1+</td>
					<td class="center">1.4</td>
					<td class="center">A</td>
				</tr>
				<tr>
					<td>Gecko</td>
					<td>Mozilla 1.5</td>
					<td>Win 95+ / OSX.1+</td>
					<td class="center">1.5</td>
					<td class="center">A</td>
				</tr>
				<tr>
					<td>Gecko</td>
					<td>Mozilla 1.6</td>
					<td>Win 95+ / OSX.1+</td>
					<td class="center">1.6</td>
					<td class="center">A</td>
				</tr>
				<tr>
					<td>Gecko</td>
					<td>Mozilla 1.7</td>
					<td>Win 98+ / OSX.1+</td>
					<td class="center">1.7</td>
					<td class="center">A</td>
				</tr>
				<tr>
					<td>Gecko</td>
					<td>Mozilla 1.8</td>
					<td>Win 98+ / OSX.1+</td>
					<td class="center">1.8</td>
					<td class="center">A</td>
				</tr>
				<tr>
					<td>Gecko</td>
					<td>Seamonkey 1.1</td>
					<td>Win 98+ / OSX.2+</td>
					<td class="center">1.8</td>
					<td class="center">A</td>
				</tr>
				<tr>
					<td>Gecko</td>
					<td>Epiphany 2.20</td>
					<td>Gnome</td>
					<td class="center">1.8</td>
					<td class="center">A</td>
				</tr>
				<tr>
					<td>Webkit</td>
					<td>Safari 1.2</td>
					<td>OSX.3</td>
					<td class="center">125.5</td>
					<td class="center">A</td>
				</tr>
				<tr>
					<td>Webkit</td>
					<td>Safari 1.3</td>
					<td>OSX.3</td>
					<td class="center">312.8</td>
					<td class="center">A</td>
				</tr>
				<tr>
					<td>Webkit</td>
					<td>Safari 2.0</td>
					<td>OSX.4+</td>
					<td class="center">419.3</td>
					<td class="center">A</td>
				</tr>
				<tr>
					<td>Webkit</td>
					<td>Safari 3.0</td>
					<td>OSX.4+</td>
					<td class="center">522.1</td>
					<td class="center">A</td>
				</tr>
				<tr>
					<td>Webkit</td>
					<td>OmniWeb 5.5</td>
					<td>OSX.4+</td>
					<td class="center">420</td>
					<td class="center">A</td>
				</tr>
				<tr>
					<td>Webkit</td>
					<td>iPod Touch / iPhone</td>
					<td>iPod</td>
					<td class="center">420.1</td>
					<td class="center">A</td>
				</tr>
				<tr>
					<td>Webkit</td>
					<td>S60</td>
					<td>S60</td>
					<td class="center">413</td>
					<td class="center">A</td>
				</tr>
				<tr>
					<td>Presto</td>
					<td>Opera 7.0</td>
					<td>Win 95+ / OSX.1+</td>
					<td class="center">-</td>
					<td class="center">A</td>
				</tr>
				<tr>
					<td>Presto</td>
					<td>Opera 7.5</td>
					<td>Win 95+ / OSX.2+</td>
					<td class="center">-</td>
					<td class="center">A</td>
				</tr>
				<tr>
					<td>Presto</td>
					<td>Opera 8.0</td>
					<td>Win 95+ / OSX.2+</td>
					<td class="center">-</td>
					<td class="center">A</td>
				</tr>
				<tr>
					<td>Presto</td>
					<td>Opera 8.5</td>
					<td>Win 95+ / OSX.2+</td>
					<td class="center">-</td>
					<td class="center">A</td>
				</tr>
				<tr>
					<td>Presto</td>
					<td>Opera 9.0</td>
					<td>Win 95+ / OSX.3+</td>
					<td class="center">-</td>
					<td class="center">A</td>
				</tr>
				<tr>
					<td>Presto</td>
					<td>Opera 9.2</td>
					<td>Win 88+ / OSX.3+</td>
					<td class="center">-</td>
					<td class="center">A</td>
				</tr>
				<tr>
					<td>Presto</td>
					<td>Opera 9.5</td>
					<td>Win 88+ / OSX.3+</td>
					<td class="center">-</td>
					<td class="center">A</td>
				</tr>
				<tr>
					<td>Presto</td>
					<td>Opera for Wii</td>
					<td>Wii</td>
					<td class="center">-</td>
					<td class="center">A</td>
				</tr>
				<tr>
					<td>Presto</td>
					<td>Nokia N800</td>
					<td>N800</td>
					<td class="center">-</td>
					<td class="center">A</td>
				</tr>
				<tr>
					<td>Presto</td>
					<td>Nintendo DS browser</td>
					<td>Nintendo DS</td>
					<td class="center">8.5</td>
					<td class="center">C/A<sup>1</sup>
					</td>
				</tr>
				<tr>
					<td>KHTML</td>
					<td>Konqureror 3.1</td>
					<td>KDE 3.1</td>
					<td class="center">3.1</td>
					<td class="center">C</td>
				</tr>
				<tr>
					<td>KHTML</td>
					<td>Konqureror 3.3</td>
					<td>KDE 3.3</td>
					<td class="center">3.3</td>
					<td class="center">A</td>
				</tr>
				<tr>
					<td>KHTML</td>
					<td>Konqureror 3.5</td>
					<td>KDE 3.5</td>
					<td class="center">3.5</td>
					<td class="center">A</td>
				</tr>
				<tr>
					<td>Tasman</td>
					<td>Internet Explorer 4.5</td>
					<td>Mac OS 8-9</td>
					<td class="center">-</td>
					<td class="center">X</td>
				</tr>
				<tr>
					<td>Tasman</td>
					<td>Internet Explorer 5.1</td>
					<td>Mac OS 7.6-9</td>
					<td class="center">1</td>
					<td class="center">C</td>
				</tr>
				<tr>
					<td>Tasman</td>
					<td>Internet Explorer 5.2</td>
					<td>Mac OS 8-X</td>
					<td class="center">1</td>
					<td class="center">C</td>
				</tr>
				<tr>
					<td>Misc</td>
					<td>NetFront 3.1</td>
					<td>Embedded devices</td>
					<td class="center">-</td>
					<td class="center">C</td>
				</tr>
				<tr>
					<td>Misc</td>
					<td>NetFront 3.4</td>
					<td>Embedded devices</td>
					<td class="center">-</td>
					<td class="center">A</td>
				</tr>
				<tr>
					<td>Misc</td>
					<td>Dillo 0.8</td>
					<td>Embedded devices</td>
					<td class="center">-</td>
					<td class="center">X</td>
				</tr>
				<tr>
					<td>Misc</td>
					<td>Links</td>
					<td>Text only</td>
					<td class="center">-</td>
					<td class="center">X</td>
				</tr>
				<tr>
					<td>Misc</td>
					<td>Lynx</td>
					<td>Text only</td>
					<td class="center">-</td>
					<td class="center">X</td>
				</tr>
				<tr>
					<td>Misc</td>
					<td>IE Mobile</td>
					<td>Windows Mobile 6</td>
					<td class="center">-</td>
					<td class="center">C</td>
				</tr>
				<tr>
					<td>Misc</td>
					<td>PSP browser</td>
					<td>PSP</td>
					<td class="center">-</td>
					<td class="center">C</td>
				</tr>
				<tr>
					<td>Other browsers</td>
					<td>All others</td>
					<td>-</td>
					<td class="center">-</td>
					<td class="center">U</td>
				</tr>
			</tbody>
			<tfoot>
				<tr>
					<th>Rendering engine</th>
					<th>Browser</th>
					<th>Platform(s)</th>
					<th>Engine version</th>
					<th>CSS grade</th>
				</tr>
			</tfoot>
		</table>
		
	</div>
</div>


<!-- Table exporting -->
<div class="panel panel-default">
	<div class="panel-heading">
		<h3 class="panel-title">Table exporting</h3>
		
		<div class="panel-options">
			<a href="" data-toggle="panel">
				<span class="collapse-icon">&ndash;</span>
				<span class="expand-icon">+</span>
			</a>
			<a href="" data-toggle="remove">
				&times;
			</a>
		</div>
	</div>
	<div class="panel-body">
		
		<script type="text/javascript">
		jQuery(document).ready(function($)
		{
			$("#example-4").dataTable({
				dom: "<'row'<'col-sm-5'l><'col-sm-7'Tf>r>"+
					 "t"+
					 "<'row'<'col-xs-6'i><'col-xs-6'p>>",
				tableTools: {
					sSwfPath: "assets/js/datatables/tabletools/copy_csv_xls_pdf.swf"
				}
			});
		});
		</script>
		
		<table class="table table-bordered table-striped" id="example-4">
			<thead>
				<tr>
					<th>Name</th>
					<th>Position</th>
					<th>Office</th>
					<th>Age</th>
					<th>Start date</th>
					<th>Salary</th>
				</tr>
			</thead>
		 
			<tfoot>
				<tr>
					<th>Name</th>
					<th>Position</th>
					<th>Office</th>
					<th>Age</th>
					<th>Start date</th>
					<th>Salary</th>
				</tr>
			</tfoot>
		 
			<tbody>
				<tr>
					<td>Tiger Nixon</td>
					<td>System Architect</td>
					<td>Edinburgh</td>
					<td>61</td>
					<td>2011/04/25</td>
					<td>$320,800</td>
				</tr>
				<tr>
					<td>Garrett Winters</td>
					<td>Accountant</td>
					<td>Tokyo</td>
					<td>63</td>
					<td>2011/07/25</td>
					<td>$170,750</td>
				</tr>
				<tr>
					<td>Ashton Cox</td>
					<td>Junior Technical Author</td>
					<td>San Francisco</td>
					<td>66</td>
					<td>2009/01/12</td>
					<td>$86,000</td>
				</tr>
				<tr>
					<td>Cedric Kelly</td>
					<td>Senior Javascript Developer</td>
					<td>Edinburgh</td>
					<td>22</td>
					<td>2012/03/29</td>
					<td>$433,060</td>
				</tr>
				<tr>
					<td>Airi Satou</td>
					<td>Accountant</td>
					<td>Tokyo</td>
					<td>33</td>
					<td>2008/11/28</td>
					<td>$162,700</td>
				</tr>
				<tr>
					<td>Brielle Williamson</td>
					<td>Integration Specialist</td>
					<td>New York</td>
					<td>61</td>
					<td>2012/12/02</td>
					<td>$372,000</td>
				</tr>
				<tr>
					<td>Herrod Chandler</td>
					<td>Sales Assistant</td>
					<td>San Francisco</td>
					<td>59</td>
					<td>2012/08/06</td>
					<td>$137,500</td>
				</tr>
				<tr>
					<td>Rhona Davidson</td>
					<td>Integration Specialist</td>
					<td>Tokyo</td>
					<td>55</td>
					<td>2010/10/14</td>
					<td>$327,900</td>
				</tr>
				<tr>
					<td>Colleen Hurst</td>
					<td>Javascript Developer</td>
					<td>San Francisco</td>
					<td>39</td>
					<td>2009/09/15</td>
					<td>$205,500</td>
				</tr>
				<tr>
					<td>Sonya Frost</td>
					<td>Software Engineer</td>
					<td>Edinburgh</td>
					<td>23</td>
					<td>2008/12/13</td>
					<td>$103,600</td>
				</tr>
				<tr>
					<td>Jena Gaines</td>
					<td>Office Manager</td>
					<td>London</td>
					<td>30</td>
					<td>2008/12/19</td>
					<td>$90,560</td>
				</tr>
				<tr>
					<td>Quinn Flynn</td>
					<td>Support Lead</td>
					<td>Edinburgh</td>
					<td>22</td>
					<td>2013/03/03</td>
					<td>$342,000</td>
				</tr>
				<tr>
					<td>Charde Marshall</td>
					<td>Regional Director</td>
					<td>San Francisco</td>
					<td>36</td>
					<td>2008/10/16</td>
					<td>$470,600</td>
				</tr>
				<tr>
					<td>Haley Kennedy</td>
					<td>Senior Marketing Designer</td>
					<td>London</td>
					<td>43</td>
					<td>2012/12/18</td>
					<td>$313,500</td>
				</tr>
				<tr>
					<td>Tatyana Fitzpatrick</td>
					<td>Regional Director</td>
					<td>London</td>
					<td>19</td>
					<td>2010/03/17</td>
					<td>$385,750</td>
				</tr>
				<tr>
					<td>Michael Silva</td>
					<td>Marketing Designer</td>
					<td>London</td>
					<td>66</td>
					<td>2012/11/27</td>
					<td>$198,500</td>
				</tr>
				<tr>
					<td>Paul Byrd</td>
					<td>Chief Financial Officer (CFO)</td>
					<td>New York</td>
					<td>64</td>
					<td>2010/06/09</td>
					<td>$725,000</td>
				</tr>
				<tr>
					<td>Gloria Little</td>
					<td>Systems Administrator</td>
					<td>New York</td>
					<td>59</td>
					<td>2009/04/10</td>
					<td>$237,500</td>
				</tr>
				<tr>
					<td>Bradley Greer</td>
					<td>Software Engineer</td>
					<td>London</td>
					<td>41</td>
					<td>2012/10/13</td>
					<td>$132,000</td>
				</tr>
				<tr>
					<td>Dai Rios</td>
					<td>Personnel Lead</td>
					<td>Edinburgh</td>
					<td>35</td>
					<td>2012/09/26</td>
					<td>$217,500</td>
				</tr>
				<tr>
					<td>Jenette Caldwell</td>
					<td>Development Lead</td>
					<td>New York</td>
					<td>30</td>
					<td>2011/09/03</td>
					<td>$345,000</td>
				</tr>
				<tr>
					<td>Yuri Berry</td>
					<td>Chief Marketing Officer (CMO)</td>
					<td>New York</td>
					<td>40</td>
					<td>2009/06/25</td>
					<td>$675,000</td>
				</tr>
				<tr>
					<td>Caesar Vance</td>
					<td>Pre-Sales Support</td>
					<td>New York</td>
					<td>21</td>
					<td>2011/12/12</td>
					<td>$106,450</td>
				</tr>
				<tr>
					<td>Doris Wilder</td>
					<td>Sales Assistant</td>
					<td>Sidney</td>
					<td>23</td>
					<td>2010/09/20</td>
					<td>$85,600</td>
				</tr>
				<tr>
					<td>Angelica Ramos</td>
					<td>Chief Executive Officer (CEO)</td>
					<td>London</td>
					<td>47</td>
					<td>2009/10/09</td>
					<td>$1,200,000</td>
				</tr>
				<tr>
					<td>Gavin Joyce</td>
					<td>Developer</td>
					<td>Edinburgh</td>
					<td>42</td>
					<td>2010/12/22</td>
					<td>$92,575</td>
				</tr>
				<tr>
					<td>Jennifer Chang</td>
					<td>Regional Director</td>
					<td>Singapore</td>
					<td>28</td>
					<td>2010/11/14</td>
					<td>$357,650</td>
				</tr>
				<tr>
					<td>Brenden Wagner</td>
					<td>Software Engineer</td>
					<td>San Francisco</td>
					<td>28</td>
					<td>2011/06/07</td>
					<td>$206,850</td>
				</tr>
				<tr>
					<td>Fiona Green</td>
					<td>Chief Operating Officer (COO)</td>
					<td>San Francisco</td>
					<td>48</td>
					<td>2010/03/11</td>
					<td>$850,000</td>
				</tr>
				<tr>
					<td>Shou Itou</td>
					<td>Regional Marketing</td>
					<td>Tokyo</td>
					<td>20</td>
					<td>2011/08/14</td>
					<td>$163,000</td>
				</tr>
				<tr>
					<td>Michelle House</td>
					<td>Integration Specialist</td>
					<td>Sidney</td>
					<td>37</td>
					<td>2011/06/02</td>
					<td>$95,400</td>
				</tr>
				<tr>
					<td>Suki Burks</td>
					<td>Developer</td>
					<td>London</td>
					<td>53</td>
					<td>2009/10/22</td>
					<td>$114,500</td>
				</tr>
				<tr>
					<td>Prescott Bartlett</td>
					<td>Technical Author</td>
					<td>London</td>
					<td>27</td>
					<td>2011/05/07</td>
					<td>$145,000</td>
				</tr>
				<tr>
					<td>Gavin Cortez</td>
					<td>Team Leader</td>
					<td>San Francisco</td>
					<td>22</td>
					<td>2008/10/26</td>
					<td>$235,500</td>
				</tr>
				<tr>
					<td>Martena Mccray</td>
					<td>Post-Sales support</td>
					<td>Edinburgh</td>
					<td>46</td>
					<td>2011/03/09</td>
					<td>$324,050</td>
				</tr>
				<tr>
					<td>Unity Butler</td>
					<td>Marketing Designer</td>
					<td>San Francisco</td>
					<td>47</td>
					<td>2009/12/09</td>
					<td>$85,675</td>
				</tr>
				<tr>
					<td>Howard Hatfield</td>
					<td>Office Manager</td>
					<td>San Francisco</td>
					<td>51</td>
					<td>2008/12/16</td>
					<td>$164,500</td>
				</tr>
				<tr>
					<td>Hope Fuentes</td>
					<td>Secretary</td>
					<td>San Francisco</td>
					<td>41</td>
					<td>2010/02/12</td>
					<td>$109,850</td>
				</tr>
				<tr>
					<td>Vivian Harrell</td>
					<td>Financial Controller</td>
					<td>San Francisco</td>
					<td>62</td>
					<td>2009/02/14</td>
					<td>$452,500</td>
				</tr>
				<tr>
					<td>Timothy Mooney</td>
					<td>Office Manager</td>
					<td>London</td>
					<td>37</td>
					<td>2008/12/11</td>
					<td>$136,200</td>
				</tr>
				<tr>
					<td>Jackson Bradshaw</td>
					<td>Director</td>
					<td>New York</td>
					<td>65</td>
					<td>2008/09/26</td>
					<td>$645,750</td>
				</tr>
				<tr>
					<td>Olivia Liang</td>
					<td>Support Engineer</td>
					<td>Singapore</td>
					<td>64</td>
					<td>2011/02/03</td>
					<td>$234,500</td>
				</tr>
				<tr>
					<td>Bruno Nash</td>
					<td>Software Engineer</td>
					<td>London</td>
					<td>38</td>
					<td>2011/05/03</td>
					<td>$163,500</td>
				</tr>
				<tr>
					<td>Sakura Yamamoto</td>
					<td>Support Engineer</td>
					<td>Tokyo</td>
					<td>37</td>
					<td>2009/08/19</td>
					<td>$139,575</td>
				</tr>
				<tr>
					<td>Thor Walton</td>
					<td>Developer</td>
					<td>New York</td>
					<td>61</td>
					<td>2013/08/11</td>
					<td>$98,540</td>
				</tr>
				<tr>
					<td>Finn Camacho</td>
					<td>Support Engineer</td>
					<td>San Francisco</td>
					<td>47</td>
					<td>2009/07/07</td>
					<td>$87,500</td>
				</tr>
				<tr>
					<td>Serge Baldwin</td>
					<td>Data Coordinator</td>
					<td>Singapore</td>
					<td>64</td>
					<td>2012/04/09</td>
					<td>$138,575</td>
				</tr>
				<tr>
					<td>Zenaida Frank</td>
					<td>Software Engineer</td>
					<td>New York</td>
					<td>63</td>
					<td>2010/01/04</td>
					<td>$125,250</td>
				</tr>
				<tr>
					<td>Zorita Serrano</td>
					<td>Software Engineer</td>
					<td>San Francisco</td>
					<td>56</td>
					<td>2012/06/01</td>
					<td>$115,000</td>
				</tr>
				<tr>
					<td>Jennifer Acosta</td>
					<td>Junior Javascript Developer</td>
					<td>Edinburgh</td>
					<td>43</td>
					<td>2013/02/01</td>
					<td>$75,650</td>
				</tr>
				<tr>
					<td>Cara Stevens</td>
					<td>Sales Assistant</td>
					<td>New York</td>
					<td>46</td>
					<td>2011/12/06</td>
					<td>$145,600</td>
				</tr>
				<tr>
					<td>Hermione Butler</td>
					<td>Regional Director</td>
					<td>London</td>
					<td>47</td>
					<td>2011/03/21</td>
					<td>$356,250</td>
				</tr>
				<tr>
					<td>Lael Greer</td>
					<td>Systems Administrator</td>
					<td>London</td>
					<td>21</td>
					<td>2009/02/27</td>
					<td>$103,500</td>
				</tr>
				<tr>
					<td>Jonas Alexander</td>
					<td>Developer</td>
					<td>San Francisco</td>
					<td>30</td>
					<td>2010/07/14</td>
					<td>$86,500</td>
				</tr>
				<tr>
					<td>Shad Decker</td>
					<td>Regional Director</td>
					<td>Edinburgh</td>
					<td>51</td>
					<td>2008/11/13</td>
					<td>$183,000</td>
				</tr>
				<tr>
					<td>Michael Bruce</td>
					<td>Javascript Developer</td>
					<td>Singapore</td>
					<td>29</td>
					<td>2011/06/27</td>
					<td>$183,000</td>
				</tr>
				<tr>
					<td>Donna Snider</td>
					<td>Customer Support</td>
					<td>New York</td>
					<td>27</td>
					<td>2011/01/25</td>
					<td>$112,000</td>
				</tr>
			</tbody>
		</table>
		
	</div>
</div>